// 入口函数
$(function() {
    // ajax参数多出都用得到，所以定义为全局变量
    let q = {
        pagenum: 1, // 是	int	页码值
        pagesize: 2, // 是	int	每页显示多少条数据
        cate_id: "", // 否	string	文章分类的 Id
        state: "", // 否	string	文章的状态，可选值有：已发布、草稿
    }

    // 需求1: 渲染文章列表所有数据;
    let layer = layui.layer;
    initArticleList();
    //   封装成一个函数将来方便在次调用;
    function initArticleList() {
        // 发送 ajax
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: q
        }).then(res => {
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message);
            }
            // 渲染
            let arr = [];
            res.data.data.forEach(ele => {
                arr.push(`
                    <tr>
                        <td>${ ele.title}</td>
                        <td>${ ele.cate_name}</td>
                        <td>${ formatDate(ele.pub_date)}</td>
                        <td>${ ele.state}</td>
                        <td>
                            <button data-id="${ ele.Id}" class="btn-del layui-btn layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `);
            });
            // 循环完毕之后，无缝连接字符串，赋值tbody
            $("tbody").empty().html(arr.join(''));

            // 初始化文章列表完毕后，进行分页处理
            // 需要总条数计算总页数
            renderPage(res.data.total);

        })
    }

    // 需求2: 渲染文章分类;
    let form = layui.form;
    initArtCateList();
    // 封装
    function initArtCateList() {
        // 发送ajax，获取所有文章分类列表;
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(res => {
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message);
            }
            // 渲染文章分类;
            let arr = ['<option value="">请选择文章类别</option>'];
            res.data.data.forEach(ele => {
                arr.push(`
                    <option value="${ ele.Id}">${ele.name}</option>
                `);
            });
            // 循环完毕之后，无缝拼接一个字符串
            let str = arr.join('');
            // console.log(str);
            $("[name=cate_id]").empty().html(str);
            // form.render()可以渲染 select / checkbox / radio
            form.render(); //  form.render();本质就是根据 select 标签生成 dl 标签
        });
    }

    // 需求3: 完成筛选功能
    $("#searchForm").on('submit', function(e) {
        // 阻止表单默认提交
        e.preventDefault();
        // 根据form表单，修改参数
        q.cate_id = $('[name=cate_id]').val();
        q.state = $('[name=state]').val();
        // 根据参数，重新渲染页面中的文章列表
        initArticleList();
    })
    $("#searchForm").on('reset', function() {
        // 阻止表单默认提交
        // 根据form表单，修改参数
        q.cate_id = '';
        q.state = '';
        initArticleList();
    })

    // 需求4: 分页
    function renderPage(total) {
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            // limit每页显示的条数
            limit: q.pagesize,
            // curr 控制当前页面
            curr: q.pagenum,
            // layout 控制显示的元素
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            // limits 控制下拉选择显示个数的数组
            limits: [2, 3, 5, 10],
            // jump可以在点击页码和每页显示条数切换的时候触发
            jump: function(obj, first) {
                console.log(obj.limit);
                console.log(obj.curr);
                // console.log(first);
                // 非首次操作
                if (!first) {
                    q.pagenum = obj.curr;
                    q.pagesize = obj.limit;
                    initArticleList();
                }
            }
        });
    }

    // 需求5: 删除
    $("tbody").on('click', '.btn-del', function() {
        let id = $(this).attr('data-id');
        // 询问框
        layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function(index) {
            // 发送 ajax 删除文章
            axios({
                method: 'GET',
                //  ：删除   /保留
                url: '/my/article/delete/' + id
            }).then(res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message);
                }
                // 成功提示
                layer.msg('恭喜您，删除文章成功！');

                // bug解决: 在次刷新页面之前，判断逻辑pagenum是否要 -1
                //   发送ajax，删除文章成功，前端依然有这条数据，需要用新数据覆盖！
                // 页面中只有一个元素了，而我收到了一个删除成功的响应...
                // if($('.btn-del').length == 1 && q.pagenum > 1) {
                //     q.pagenum --;
                // }
                // 优化：短路运算;
                $('.btn-del').length == 1 && q.pagenum > 1 && q.pagenum--;

                // 刷新页面
                initArticleList();
            });
            layer.close(index);
        });
    })
});